<template>
	<div>

		<!-- 筛选及搜索 -->
		<div class="action-bar">
			<el-tabs v-model="formData.score" @tab-click="findComments">
				<el-tab-pane label="不限" name="-1"></el-tab-pane>
				<el-tab-pane v-for="(item, index) in scores" :key="index" :label="item" :name="index.toString()"></el-tab-pane>
			</el-tabs>
			<el-form inline size="small">
				<el-form-item label="商品名称">
					<el-select v-model="formData.goodsId" clearable filterable remote placeholder="输入商品名称" :remote-method="searchGoods"
					 :loading="goodsLoading" @change="findComments">
						<el-option v-for="item in goodsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用户手机号">
					<el-select v-model="formData.userId" clearable filterable remote placeholder="输入用户手机号" :remote-method="searchUser"
					 :loading="userLoading" @change="findComments">
						<el-option v-for="item in users" :key="item.id" :label="item.phone" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input v-model="formData.keyword" placeholder="输入评论关键词" maxlength="10" @keyup.enter.native="findComments">
						<el-button slot="append" icon="el-icon-search" @click="findComments">搜索</el-button>
					</el-input>
				</el-form-item>
			</el-form>
		</div>

		<!-- 评论列表 -->
		<el-table class="comment-table" :data="comments" v-loading="loading">
			<el-table-column label="商品信息" width="300px">
				<template slot-scope="scope">
					<div class="goods-wrap">
						<el-image class="thumb" :src="scope.row.thumbUrl" fit="cover"></el-image>
						<span class="name elip">{{scope.row.goodsName}}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="用户信息" width="200px">
				<template slot-scope="scope">
					<div class="user-wrap">
						<el-avatar class="avatar" :src="scope.row.avatarUrl" shape="square"></el-avatar>
						<div class="right">
							<div class="name elip">{{scope.row.userName}}</div>
							<div class="phone elip">{{scope.row.userPhone}}</div>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="评分" align="center" width="200px">
				<template slot-scope="scope">
					<el-rate :value="scope.row.score" disabled show-score></el-rate>
				</template>
			</el-table-column>
			<el-table-column label="内容" prop="content" width="300px"></el-table-column>
			<el-table-column label="更多" type="expand">
				<template slot-scope="scope">
					<el-card class="photos-wrap" v-if="scope.row.photoUrls">
						<div slot="header">上传的图片</div>
						<template v-for="(item, index) in scope.row.photoUrls">
							<el-image :key="index" :src="item" fit="cover" class="photo" :preview-src-list="scope.row.photoUrls"></el-image>
						</template>
					</el-card>
					<el-form label-position="left" inline>
						<el-form-item label="评价时间：">
							<span v-if="scope.row.createTime">{{scope.row.createTime}}</span>
							<span v-else>-</span>
						</el-form-item>
						<el-form-item label="点赞人数：">
							<span v-if="scope.row.likes">{{scope.row.likes}}</span>
							<span v-else>-</span>
						</el-form-item>
					</el-form>
				</template>
			</el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<el-switch :value="scope.row.status" :active-value="0" @change="updateStatus(scope.row)"></el-switch>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" size="small" icon="el-icon-delete" @click="deleteComment(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页条 -->
		<div class="pagination-wrap" v-show="totalSize > pageSize">
			<el-pagination hide-on-single-page background @size-change="pageSizeChange" @current-change="pageNumberChange"
			 :current-page="pageNumber" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
			 :total="totalSize">
			</el-pagination>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				comments: [],
				loading: false,
				formData: {
					score: '-1',
					goodsId: '',
					userId: '',
					keyword: ''
				},
				pageNumber: 1,
				pageSize: 10,
				totalSize: 0,
				scores: ['失望', '一般', '满意', '喜欢', '超爱'],
				goodsLoading: false,
				userLoading: false,
				goodsList: [],
				users: []
			}
		},
		created() {
			this.findComments();
		},
		methods: {
			findComments(isSwitchPage = false) {
				if (!isSwitchPage) this.pageNumber = 1;

				this.loading = true;
				this.$util.request('/comment', {
					score: this.formData.score,
					goodsId: this.formData.goodsId,
					userId: this.formData.userId,
					keyword: this.formData.keyword,
					pageNumber: this.pageNumber,
					pageSize: this.pageSize
				}, (res) => {
					this.loading = false;

					this.comments = res.list.map(e => {
						if (e.photoUrls) e.photoUrls = e.photoUrls.split(',');
						return e;
					});
					this.totalSize = res.totalRow;
				}, true);
			},
			searchGoods(keyword) {
				this.goodsLoading = true;
				this.$util.request('/goods/assist', {
					keyword
				}, (res) => {
					this.goodsLoading = false;
					this.goodsList = res;
				}, true);
			},
			searchUser(keyword) {
				this.userLoading = true;
				this.$util.request('/user/assist', {
					keyword
				}, (res) => {
					this.userLoading = false;
					this.users = res;
				}, true);
			},
			updateStatus(item) {
				this.$util.requestWithConfirm(`确定${item.status == 0 ? '隐藏' : '显示'}该评论吗？`, '/comment/updateStatus', {
					id: item.id
				}).then(_ => {
					this.findComments();
				});
			},
			deleteComment(id) {
				this.$util.requestWithConfirm(`确定删除该评论吗？`, '/comment/delete', {
					id
				}).then(_ => {
					this.findComments();
				});
			},
			pageSizeChange(e) {
				this.pageSize = e;
				this.findComments(true);
			},
			pageNumberChange(e) {
				this.pageNumber = e;
				this.findComments(true);
			}
		}
	}
</script>

<style lang="scss">
	.action-bar {
		display: flex;

		.el-tabs {
			flex: 1;
			margin-top: -5px;
			margin-right: 20px;
		}
	}

	.comment-table {

		.goods-wrap {
			@extend %flex-align-center;

			.thumb {
				width: 80px;
			}

			.name {
				margin-left: 10px;
			}
		}

		.user-wrap {
			@extend %flex-align-center;

			.avatar {
				flex-shrink: 0;
				margin-right: 10px;
			}

			.right {

				.phone {
					color: gray;
					font-size: 13px;
				}
			}
		}

		.photos-wrap {
			margin-left: -20px;
			margin-bottom: 20px;

			.photo {
				width: 200px;
				height: 200px;
				margin: 5px;
			}
		}

		.el-form {

			label {
				width: 90px;
				color: #99a9bf;
			}

			.el-form-item {
				margin-bottom: 0;
				margin-right: 100px;
			}
		}
	}
</style>
